<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

    <!-- 强制移动端视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>审批列表</title>
    <link rel="stylesheet" href="./css/vant.min.css">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12.52/lib/index.css"> -->
    <style>
        body {
            background-color: rgb(248, 248, 248);
            color: #323233;
            font-size: 15px;
        }

        #app {
            padding-top: 80px;
        }

        .header {
            position: fixed;
            top: 0;
            z-index: 99;
            width: 100%;
        }

        .header .top {
            display: flex;

        }

        .header .desc {
            /* margin-top: 50px; */
            padding: 5px;
            font-size: 14px;
            background-color: rgb(248, 248, 248);
        }


        .desc .tip {
            color: #F56C6C;
            font-weight: bold;
        }

        .van-dropdown-menu {
            display: inline-block;
            flex: 1;
            max-width: 35%;
        }

        .van-dropdown-menu__title::after {
            right: -1px;
        }

        .main {
            padding: 10px;
        }

        .dateTool {
            padding: 3px;
            display: flex;
            justify-content: center;
        }

        .status-1 {
            color: #007aff;
        }

        .status-2 {
            color: #00aaff;
        }

        .status-3 {
            color: #ffaa00;
        }

        .status-4 {
            color: #ff5500;
        }

        .status-5 {
            color: #00c853;
        }

        .card {
            background-color: #fff;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
            box-shadow: 0 8px 12px #ebedf0;
            margin: 10px 10px;
        }

        .card .item {
            display: flex;
            margin-bottom: 5px;
        }

        .card .item .left {
            color: #676767;
        }

        .card .item .right {
            flex: 1;
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="top">
                <van-dropdown-menu active-color="#1989fa">
                    <van-dropdown-item v-model="form.status" :options="statusList" @change="selectChange" />
                </van-dropdown-menu>
                <van-dropdown-menu active-color="#1989fa">
                    <van-dropdown-item v-model="form.company" :options="companyList" @change="selectChange" />
                </van-dropdown-menu active-color="#1989fa">
                <van-dropdown-menu>
                    <van-dropdown-item :title="form.time ? form.time : '日期范围'" ref="dateDrop" @closed="onClosed">

                        <van-calendar ref="calendar" color="#1989fa" :default-date="defaultDate" :show-confirm="true"
                            :poppable="false" :min-date="minDate" :max-date="maxDate" type="range"
                            :style="{ height: '450px' }" @confirm="onConfirm">
                        </van-calendar>
                        <!-- <div class="dateTool">
                            <van-button type="danger" style="margin-right: 20px;">取消</van-button>
                            <van-button type="info" @click="dateConfirm">确定</van-button>
                        </div> -->
                    </van-dropdown-item>
                </van-dropdown-menu>
            </div>
            <div class="desc">
                共<span class="tip">{{totalItems}}</span>条审批数据,
                实际结算金额 <span class="tip">{{totalMoney}}</span>元,
                共 <span class="tip">{{carNumber}}</span> 辆车
            </div>
        </div>


        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="loaded">
            <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了"
                @load="updateList">
                <div class="card" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
                    <div class="item">
                        <div class="left">公司名称:</div>
                        <div class="right">{{item.company}}</div>
                    </div>
                    <div class="item">
                        <div class="left">货物名称:</div>
                        <div class="right">{{ item.goods }}</div>
                    </div>
                    <div class="item">
                        <div class="left">申请时间:</div>
                        <div class="right">{{ item.add_time }}</div>
                    </div>
                    <div class="item">
                        <div class="left">费用单号:</div>
                        <div class="right">
                            {{ item.yund_id.length > 3 ? 
                            `${item.yund_id.slice(0,3).join(',')}...`
                             : item.yund_id.slice(0,3).join(',') }}
                        </div>
                    </div>
                    <div class="item">
                        <div class="left">申请金额:</div>
                        <div class="right">￥{{ item.money }}</div>
                    </div>
                    <div class="item">
                        <div class="left">批次号:</div>
                        <div class="right">{{ item.batch_number }}</div>
                    </div>
                    <div class="item">
                        <div class="left">审批状态:</div>
                        <div class="right">
                            <span :class="['status', 'status-' + item.status]">
                                {{ item.status == 5 ? '董事长已审批' : statusMap[item.status] }}
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="right" style="font-weight: bold;margin-top: 5px;" >
                            {{form.status == 1 ? '查看详情' : '去审批'}}
                            <van-icon name="arrow" />
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
    <script src="./js/vue.min.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/md5.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/api.js"></script>
    <script>
         let isTest = false;
        if(location.href.indexOf('127.0.0.1') != -1 || location.href.indexOf('localhost') != -1){
            isTest = true
        }else{
            isTest = false
        }
        // let openId = getUrlParam('openId');
        let openId = isTest ? 'ogvOkw1-CmOf1v38IAJbUjv_Orr4' : getUrlParam('openId');
        new Vue({
            el: '#app',
            data() {
                return {
                    loading: false,
                    finished: false,
                    refreshing: false,
                    calendarShow: true,
                    defaultDate: new Date(),
                    minDate: new Date(2010, 0, 1),
                    maxDate: new Date(),
                    totalPages: 0,
                    totalItems: 0,
                    totalMoney: 0,
                    carNumber: 0,
                    timeRange: '',
                    statusMap: {
                        1: '开单人已审批',
                        2: '追踪人员已审批',
                        3: '平台已审批',
                        4: '财务已审批',
                        5: '董事长已审批'
                    },
                    form: {
                        page: 1,
                        pageSize: 10,
                        status: 0,
                        company: '',
                        time: ''
                    },
                    statusList: [{
                            text: '未审批',
                            value: 0,
                        },
                        {
                            text: '已审批',
                            value: 1,
                        }
                    ],
                    companyList: [{
                        text: '全部公司',
                        value: '',
                    }, ],
                    list: [],
                    loaded: false,
                };
            },
            mounted() {
                this.initial();
            },
            methods: {
                async initial() {
                    if(!openId){
                        vant.Toast('用户信息获取失败!');
                        setTimeout(() => {
                            //返回上一页
                            window.history.back();
                        }, 2000)
                        return;
                    }
     
                    let result = await $api.getWechatLogin({
                        // openId: 'ogvOkw1-CmOf1v38IAJbUjv_Orr4'
                        openId
                    });
                    if (result.code != 200) {
                        vant.Toast('暂无权限查看');
                        setTimeout(() => {
                            //返回上一页
                            window.history.back();
                        }, 2000)
                        return;
                    }
                    //存取用户信息
                    tools.setUserInfo(result.data);
                    tools.setUserId(result.data.user_id);
                    tools.setToken(result.data.token);
                    let companyInfo = await $api.getCompany();
                    if (companyInfo.code == 200) {
                        this.companyList = [...this.companyList, ...companyInfo.data.map(item => {
                            return {
                                text: item,
                                value: item,
                            }
                        })]
                    }
                    this.loaded = true;
                    this.updateList();
                },
                onRefresh() {
                    // 清空列表数据
                    this.finished = false;

                    // 重新加载数据
                    // 将 loading 设置为 true，表示处于加载状态
                    this.loading = true;
                    this.form.page = 1;
                    this.list = [];
                    this.updateList();
                },
                selectChange() {
                    this.finished = false;
                    // this.loading = true;
                    this.form.page = 1;
                    this.list = [];
                    this.updateList();
                },
                async updateList() {
                    if (this.refreshing) {
                        this.list = [];
                        this.refreshing = false;
                    }
                    console.log('this.form', this.form);

                    let result = await $api.getApproveList(this.form);
                    this.loading = false;

                    if (result.code == 200) {
                        this.totalPages = result.data.totalPages;
                        this.totalItems = result.data.totalItems;
                        this.totalMoney = result.data.totalMoney;
                        this.carNumber = result.data.carNumber;
                        this.list = [...this.list, ...result.data.list];
                        if (this.list.length >= this.totalItems) {
                            //加载完毕
                            this.finished = true;
                        } else {
                            this.form.page++;
                        }
                    }
                    this.timeRange = '';

                },
                onClosed() {
                    console.log('隐藏日期面板');
                    if (!this.timeRange) {
                        //重置数据
                        this.form.time = '';
                        this.defaultDate = new Date();
                    }
                    this.selectChange();

                },
                formatDate(date) {
                    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
                },
                onConfirm(date) {
                    const [start, end] = date;
                    //判断是否进入没选日期直接点了确定
                    let endTimeStamp = end.getTime();
                    let nowTimeStamop = new Date().getTime();
                    if (endTimeStamp > nowTimeStamop) {
                        vant.Toast.fail('请选择时间区间!');
                        return;
                    }

                    this.show = false;
                    this.form.time = `${this.formatDate(start)} - ${this.formatDate(end)}`;
                    this.$refs.dateDrop.toggle(false);
                    this.timeRange = date;
                },
                //去审批详情页
                goDetail(row){
                    location.href = `signProcessLin.html?batch_number=${row.batch_number}`;
                },
            }
        });
    </script>
</body>

</html>